.head{
  top: 0;
  width: 100%;
}

.navbar-header{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  height: 50px;
  width: 55px;
  .header-menu{
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 999;
    height: 20px;
    width: 25px;
    span {
      display: block;
      position: absolute;
      height: 2px;
      background-color: #fff;
      width: 25px;
      left: 0;
      -webkit-transition: -webkit-transform .25s ease, width .25s ease, background-color .25s ease;
      transition: transform .25s ease, width .25s ease, background-color .25s ease;

      &:nth-of-type(1) {
        top: 1px;
      }
      &:nth-of-type(2) {
        top: 9px;
      }
      &:nth-of-type(3) {
        top: 17px;
        left: auto;
        right: 0;
      }
    }
  }
  .header-menu.step2 span{
    &:nth-of-type(1) {
      width: 50%;
      -webkit-transform: translate(1.5px, 3.5px) rotate(45deg);
      transform: translate(1.5px, 3.5px) rotate(45deg);
    }
    &:nth-of-type(2) {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    &:nth-of-type(3) {
      width: 50%;
      -webkit-transform: translate(-1.5px, -3.5px) rotate(45deg);
      transform: translate(-1.5px, -3.5px) rotate(45deg);
    }
  }
}
.navbar-default{
  background: none;
  border:none;
  .navbar-collapse{
    bottom: 0;
    height: auto;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    margin: 0;
    -webkit-transition: width .3s ease 2s, height .3s ease 2s;
    transition: width .3s ease 2s, height .3s ease 2s;
    width: auto;
    z-index: 200;
    background: rgba(0, 0, 0, .8);

    .header-nav {
      display: table;
      height: 100%;
      position: relative;
      text-align: center;
      -webkit-transition: all .3s ease 0s;
      transition: all .3s ease 0s;
      width: 100%;
      z-index: 400;

      .header-nav-body {
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
}
.navbar-default{
  .navbar-nav > li > a {
    text-align: center;
    color: #fff;
  }
  .navbar-toggle,.navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
    background: none;
    border: none;
  }
}